<template>
  <div class="mapPrint">
    <el-dialog
      :visible.sync="mapPrintVisible"
      :close-on-click-modal="false"
      top="11vh"
      width="950px"
    >
      <el-row>
        <el-col :span="15">
          <div style="border:1px solid black;">
            <!-- 标题抬头 -->
            <div style="height:35px;line-height:35px;">
              <div :style="headFontStyle">{{ this.form.header }}</div>
            </div>
            <!-- 地图 -->
            <div id="printMap">
              地图区域
            </div>
            <!-- 页脚 -->
            <div style="height:35px;line-height:35px;">
              <div :style="footFontStyle">{{ this.form.footer }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <div style="background-color:#fff;height:500px;padding:5px">
            <el-form
              ref="form"
              :rules="rules"
              :model="form"
              size="small"
              label-width="80px"
            >
              <!-- 打印格式 -->
              <el-form-item label="格式:">
                <el-row>
                  <el-col :span="15">
                    <el-select
                      v-model="form.formatVal"
                      size="small"
                      placeholder="请选择尺寸"
                    >
                      <el-option
                        v-for="item in formatFulls"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="9">
                    <el-select
                      v-model="form.formatDirection"
                      size="small"
                      placeholder="方向"
                    >
                      <el-option
                        value="landscape"
                        label="横向"
                      />
                      <el-option
                        value="portrait"
                        label="纵向"
                      />
                    </el-select>
                  </el-col>
                </el-row>

              </el-form-item>

              <!-- DPI -->
              <el-form-item label="DPI:">
                <el-row>
                  <el-input v-model="form.dpi"/>
                </el-row>
              </el-form-item>

              <!-- 标题 -->
              <el-form-item label="标题:">
                <el-row>
                  <el-input
                    ref="headTitle"
                    :rows="2"
                    v-model="form.header"
                    placeholder="请输入标题"
                  />
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-select
                      v-model="form.headFont"
                      size="small"
                      placeholder="请选择字体"
                    >
                      <el-option
                        v-for="item in fontStyle"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="9">
                    <el-select
                      v-model="form.headFontSize"
                      size="small"
                      placeholder="请选择字体尺寸"
                    >
                      <el-option
                        v-for="item in fontSizes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-col>
                </el-row>
                <el-row>
                  <div>
                    <el-color-picker
                      v-model="form.headColor"
                      size="small"
                    />
                    <el-button-group style="float: right;margin: 7px 0">
                      <!-- 加粗 -->
                      <el-button
                        :type="form.headBold?'info':''"
                        size="small"
                        icon="kfb-icon-bold1"
                        @click="form.headBold=!form.headBold"
                      />
                      <!-- 斜体 -->
                      <el-button
                        :type="form.headItalic?'info':''"
                        size="small"
                        icon="kfb-icon-Italic"
                        style ="color:black"
                        @click="form.headItalic=!form.headItalic"
                      />
                      <!-- 左侧 -->
                      <el-button
                        :type="form.headTextAlign==='left'?'info':''"
                        size="small"
                        icon="kfb-icon-EditingRight"
                        style ="color:black"
                        @click="form.headTextAlign='left'"
                      />
                      <!-- 居中 -->
                      <el-button
                        :type="form.headTextAlign==='center'?'info':''"
                        size="small"
                        icon="kfb-icon-EditingCenter"
                        style = "color:black"
                        @click="form.headTextAlign='center'"
                      />
                      <!-- 右侧 -->
                      <el-button
                        :type="form.headTextAlign==='right'?'info':''"
                        size="small"
                        icon="kfb-icon-EditingRight"
                        @click="form.headTextAlign='right'"
                      />
                    </el-button-group>
                  </div>
                </el-row>
              </el-form-item>

              <!-- 页脚 -->
              <el-form-item label="页脚:">
                <el-row>
                  <el-input
                    ref="footTitle"
                    :rows="2"
                    v-model="form.footer"
                    placeholder="请输入页脚"
                  />
                </el-row>
                <el-row>
                  <el-col :span="15">
                    <el-select
                      v-model="form.footFont"
                      size="small"
                      placeholder="请选择字体"
                    >
                      <el-option
                        v-for="item in fontStyle"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-col>
                  <el-col :span="9">
                    <el-select
                      v-model="form.footFontSize"
                      size="small"
                      placeholder="请选择字体尺寸"
                    >
                      <el-option
                        v-for="item in fontSizes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-col>
                </el-row>
                <el-row>
                  <div>
                    <el-color-picker
                      v-model="form.footColor"
                      size="small"
                      style="vertical-align: middle"
                    />

                    <el-button-group style="float: right;margin: 7px 0">
                      <!-- 加粗 -->
                      <el-button
                        :type="form.footBold?'info':''"
                        size="small"
                        icon="kfb-icon-bold1"
                        style="vertical-align: middle"
                        @click="form.footBold=!form.footBold"
                      />
                      <!-- 斜体 -->
                      <el-button
                        :type="form.footItalic?'info':''"
                        size="small"
                        icon="kfb-icon-Italic"
                        @click="form.footItalic=!form.footItalic"
                      />
                      <!-- 左侧 -->
                      <el-button
                        :type="form.footTextAlign==='left'?'info':''"
                        size="small"
                        icon="kfb-icon-EditingRight"
                        @click="form.footTextAlign='left'"
                      />
                      <!-- 居中 -->
                      <el-button
                        :type="form.footTextAlign==='center' ?'info':''"
                        size="small"
                        icon="kfb-icon-EditingCenter"
                        @click="form.footTextAlign='center'"
                      />
                      <!-- 右侧 -->
                      <el-button
                        :type="form.footTextAlign==='right' ?'info':''"
                        size="small"
                        icon="kfb-icon-EditingRight"
                        @click="form.footTextAlign='right'"
                      />
                    </el-button-group>
                  </div>
                </el-row>
              </el-form-item>

              <!-- 比例尺 -->
              <el-form-item label="比例尺:">
                <el-row>
                  <el-col :span="15">
                    <el-input
                      v-model="form.scaleMaxWidth"
                      placeholder="比例尺最大宽度比例"
                    />
                  </el-col>
                  <el-col :span="9">
                    <el-select
                      v-model="form.scaleUnit"
                      size="small"
                      placeholder="请选择尺寸"
                    >
                      <el-option
                        v-for="item in scaleUnit"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>

              <!-- 边距 -->
              <el-divider content-position="left">边距</el-divider>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="上:">
                    <el-input v-model="form.marginTop"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="右:">
                    <el-input v-model="form.marginRight"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="下:">
                    <el-input v-model="form.marginBottom"/>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="左:">
                    <el-input v-model="form.marginLeft"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="单位:">
                <el-row>
                  <el-select
                    v-model="form.marginUnit"
                    size="small"
                    placeholder="请选择尺寸"
                    style="width: 273.25px"
                  >
                    <el-option
                      v-for="item in marginUnit"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-row>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="small"
          type="primary"
          @click="printMapClick"
        >下 载</el-button>
        <el-button
          size="small"
          @click="changeMapPrintVisible"
        >取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mapPrint from 'mapbox-print-pdf'
import { Loading } from 'element-ui'
import { mapState } from 'vuex'
export default {
  props: {
    mapPrintVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      //   printVisible: this.mapPrintVisible,

      builder: undefined, // 打印参数

      formatVal: 'A4', // 打印格式

      map: undefined, // map

      // 字体号选项
      fontSizes: [
        {
          value: '12',
          label: '12'
        },
        {
          value: '14',
          label: '14'
        },
        {
          value: '16',
          label: '16'
        },
        {
          value: '18',
          label: '18'
        },
        {
          value: '20',
          label: '20'
        },
        {
          value: '22',
          label: '22'
        },
        {
          value: '24',
          label: '24'
        },
        {
          value: '26',
          label: '26'
        },
        {
          value: '28',
          label: '28'
        },
        {
          value: '30',
          label: '30'
        },
        {
          value: '32',
          label: '32'
        },
        {
          value: '34',
          label: '34'
        },
        {
          value: '36',
          label: '36'
        },
        {
          value: '38',
          label: '38'
        }
      ],

      // 字体类型
      fontStyle: [
        {
          label: '宋体',
          value: 'SimSun'
        },
        {
          label: '黑体',
          value: 'SimHei'
        },
        {
          label: '微软雅黑',
          value: 'Microsoft YaHei'
        },
        {
          label: '仿宋',
          value: 'FangSong'
        },
        {
          value: 'KaiTi',
          label: '楷体'
        },
        {
          value: 'YouYuan',
          label: '幼圆'
        },
        {
          value: 'STZhongsong',
          label: '华文中宋'
        },
        {
          value: 'STXinwei',
          label: '华文新魏'
        }
      ],

      // 打印尺寸Full
      formatFulls: [
        {
          value: 'a0',
          label: 'A0'
        },
        {
          value: 'a1',
          label: 'A1'
        },
        {
          value: 'a2',
          label: 'A2'
        },
        {
          value: 'a3',
          label: 'A3'
        },
        {
          value: 'a4',
          label: 'A4'
        },
        {
          value: 'a5',
          label: 'A5'
        },
        {
          value: 'a6',
          label: 'A6'
        },
        {
          value: 'a7',
          label: 'A7'
        },
        {
          value: 'a8',
          label: 'A8'
        },
        {
          value: 'a9',
          label: 'A9'
        },
        {
          value: 'a10',
          label: 'A10'
        },
        {
          value: 'b0',
          label: 'B0'
        },
        {
          value: 'b1',
          label: 'B1'
        },
        {
          value: 'b2',
          label: 'B2'
        },
        {
          value: 'b3',
          label: 'B3'
        },
        {
          value: 'b4',
          label: 'B4'
        },
        {
          value: 'b5',
          label: 'B5'
        },
        {
          value: 'b6',
          label: 'B6'
        },
        {
          value: 'b7',
          label: 'B7'
        },
        {
          value: 'b8',
          label: 'B8'
        },
        {
          value: 'b9',
          label: 'B9'
        },
        {
          value: 'b10',
          label: 'B10'
        },
        {
          value: 'c1',
          label: 'C1'
        },
        {
          value: 'c2',
          label: 'C2'
        },
        {
          value: 'c3',
          label: 'C3'
        },
        {
          value: 'c4',
          label: 'C4'
        },
        {
          value: 'c5',
          label: 'C5'
        },
        {
          value: 'c6',
          label: 'C6'
        },
        {
          value: 'c7',
          label: 'C7'
        },
        {
          value: 'c8',
          label: 'C8'
        },
        {
          value: 'c9',
          label: 'C9'
        },
        {
          value: 'c10',
          label: 'C10'
        },
        {
          value: 'dl',
          label: 'dl(需要驱动支持)'
        },
        {
          value: 'letter',
          label: 'letter'
        },
        {
          value: 'government-letter',
          label: 'government-letter'
        },
        {
          value: 'legal',
          label: 'legal'
        },
        {
          value: 'junior-legal',
          label: 'junior-legal'
        },
        {
          value: 'ledger',
          label: 'ledger'
        },
        {
          value: 'tabloid',
          label: 'tabloid'
        },
        {
          value: 'credit-card',
          label: 'credit-card'
        }
      ],

      // 比例尺单位
      scaleUnit: [
        {
          value: 'metric',
          label: '公制'
        },
        {
          value: 'Imperial',
          label: '英制'
        },
        {
          value: 'Nautical',
          label: '海制'
        }
      ],

      // 边距单位
      marginUnit: [
        {
          value: 'pt',
          label: 'pt'
        },
        {
          value: 'in',
          label: 'in'
        },
        {
          value: 'mm',
          label: 'mm'
        },
        {
          value: 'cm',
          label: 'cm'
        }
      ],
      // 高级设置参数
      form: {
        formatVal: 'A4',
        formatDirection: 'landscape',
        dpi: 150,

        header: '',
        footer: '',

        // 标题选择字体
        headFontSize: 26,

        // 头部字体
        headFont: 'SimSun',
        // 头部是否加粗
        headBold: false,
        // 头部是否斜体
        headItalic: false,
        // 头部字体颜色
        headColor: '#000000',
        // 头部是否居中
        headTextAlign: 'center',

        // 底部是否居中
        footTextAlign: 'center',
        // 底部字体
        footFont: 'SimSun',
        // 底部选择字体
        footFontSize: 14,
        // 底部是否加粗
        footBold: false,
        // 底部是否斜体
        footItalic: false,
        // 底部字体颜色
        footColor: '#000000',

        scaleMaxWidth: 10,
        scaleUnit: 'metric',
        scale: '',
        marginUnit: 'pt',

        marginTop: 0,
        marginRight: 0,
        marginBottom: 0,
        marginLeft: 0
      },

      // 校验规则
      rules: {
        dpi: [
          {
            required: true,
            message: '请输入dpi',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    headFontStyle() {
      const headBold = this.form.headBold ? 'bold' : 'normal'
      const headItalic = this.form.headItalic ? 'italic' : 'normal'
      return `font-size:${this.form.headFontSize}px;color:${this.form.headColor};font-style:${headItalic};font-weight:${headBold};text-align:${this.form.headTextAlign};font-family:${this.form.headFont}`
    },
    footFontStyle() {
      const footBold = this.form.footBold ? 'bold' : 'normal'
      const footItalic = this.form.footItalic ? 'italic' : 'normal'
      return `font-size:${this.form.footFontSize}px;color:${this.form.footColor};font-style:${footItalic};font-weight:${footBold};text-align:${this.form.footTextAlign};font-family:${this.form.footFont}`
    },
    headHtml() {
      return `<div style='${this.headFontStyle}'>${this.form.header}</div>`
    },
    footHtml() {
      return `<div style='${this.footFontStyle}'>${this.form.footer}</div>`
    },
    ...mapState({
      mapService(state) {
        return state.eswyzt.mapServiceRight
      },
      /**
       * 比较
       * @param state
       * @returns {comparable|(function(*))|*}
       */
      comparable: function(state) {
        return state.eswyzt.comparable
      }
    })
  },
  watch: {
  },
  mounted() {},

  methods: {
    printMapClick() {
      const loading = this.$loading({
        lock: true,
        text: '正在生成PDF，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      if (!this.builder) {
        // 设置
        this.builder = mapPrint.build()
      }
      this.builder.format(this.form.formatVal) // 设置打印格式
      this.builder.dpi(this.form.dpi) // 设置dpi

      // 标题和底部基线方向
      let footAndHeadbaselineOr = 'p'
      // 设置纵向和横向
      if (this.form.formatDirection === 'landscape') {
        this.builder.landscape() // 设置打印模式
        footAndHeadbaselineOr = 'l'
      } else {
        this.builder.portrait()
        footAndHeadbaselineOr = 'p'
      }

      // 设置标题
      if (this.form.header !== '') {
        this.builder.header({
          html: this.headHtml,
          baseline: {
            format: this.form.formatVal,
            orientation: footAndHeadbaselineOr
          }
        }) // 设置标题
      }

      // 设置页脚
      if (this.form.footer !== '') {
        this.builder.footer({
          html: this.footHtml,
          baseline: {
            format: this.form.formatVal,
            orientation: footAndHeadbaselineOr
          }
        }) // 设置页脚
      }

      // 设置比例尺
      if (this.form.scaleMaxWidth !== '') {
        this.builder.scale({
          maxWidthPercent: parseFloat(this.form.scaleMaxWidth),
          unit: this.form.scaleUnit
        })
      }

      // 设置边距
      this.builder.margins(
        {
          top: parseFloat(this.getMargin(this.form.marginTop)),
          right: parseFloat(this.getMargin(this.form.marginRight)),
          bottom: parseFloat(this.getMargin(this.form.marginBottom)),
          left: parseFloat(this.getMargin(this.form.marginLeft))
        },
        this.form.marginUnit
      )

      this.builder
        .print(this.comparable.getMap(), mapboxgl)
        .then(pdf => {
          pdf.save('map.pdf')
        })
        .then(() => {
          loading.close()
          this.$notify({
            title: '成功',
            message: 'PDF生成成功！',
            type: 'success'
          })
        }) // 保存pdf
    },

    getMargin(val) {
      return isNaN(val) || val < 0 ? 0 : val
    },

    changeMapPrintVisible() {
      this.$emit('toggleMapPrint', false)
    }
  }
}
</script>

<style>
#printMap {
  height: 500px;
  width: 100%;
  line-height: 500px;
  font-size: 40px;
  font-family: '微软雅黑';
  background-color: #ccc;
  text-align: center;
}
.mapPrint .el-dialog__body,
.mapPrint .el-dialog__header,
.mapPrint .el-dialog__footer,
.mapPrint .el-dialog__title,
.mapPrint .el-dialog__footer .el-button {
  background-color: #fff;
  color: black;
}

.mapPrint .el-dialog .el-dialog__body .el-form-item__label {
  color: black;
}

.mapPrint .el-dialog__header {
  display: none;
}

.mapPrint .el-dialog__body {
  padding: 10px 10px;
}

.mapPrint .el-form-item__label {
  width: 60px !important;
}

.mapPrint .el-form-item__content {
  margin-left: 60px !important;
}

.mapPrint .el-divider {
  background-color: #000;
}

.mapPrint .el-dialog__footer {
  padding: 0px 20px 5px;
}
</style>
